import React, { Component } from 'react'
import Styled from 'styled-components'
import { connect } from 'react-redux'
import { canvas as canvasDuck } from 'ducks'
import { Popup } from 'semantic-ui-react'

import Constants from 'utils'

const ToolBar = Styled.div`
  .label-active {
    background: ${Constants.COLOR_ACTIVE};
  }

  button:hover {
    color: #000;
    background: ${Constants.COLOR_HOVER};
  }
  float: right;
  height: 100%;
  width: 50px;
  text-align: center;
  background-color:${Constants.COLOR_TOOLBAR};
  border-left:1px solid rgb(223, 223, 223);
`

const StyledButton = Styled.button`
  color: #6e7b8b;
  outline: none;
  padding-top: 3px;
  height: 35px;
  width: 35px;
  border-radius: 6px;
  margin: 3px 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
`

const BtnGroup = Styled.div`
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin-top: 5px;
`
const StyledImage = Styled.img`
  height: 18px;
  width: 18px;
`
const ToolBarButton = ({
  src, action, active, pop,
}) => {
  const cname = active ? 'label-active' : undefined
  return (
    <Popup
      trigger={(
        <StyledButton onClick={action} className={cname}>
          <StyledImage src={src} />
        </StyledButton>
)}
      content={pop}
      inverted
    />
  )
}

const ToolBarView = ({ isPanActive, actionTooglePan }) => (
  <ToolBar>
    <BtnGroup>
      <ToolBarButton
        src="https://png.icons8.com/ios/2x/expand-filled.png"
        active={isPanActive}
        action={actionTooglePan}
        pop="移动图像"
      />
      {/* <ToolBarButton src="https://png.icons8.com/material/2x/cursor.png" />
      <ToolBarButton src="https://png.icons8.com/ios/2x/zoom-in.png" />
      <ToolBarButton src="https://png.icons8.com/ios/2x/zoom-out.png" />
      <ToolBarButton src="https://png.icons8.com/ios/2x/expand-filled.png" />
      <ToolBarButton src="https://png.icons8.com/wired/2x/fit-to-width.png" /> */}
    </BtnGroup>
  </ToolBar>
)

const mapStateToProps = state => ({
  isPanActive: canvasDuck.selectors.isPanActive(state),
})

const mapDispatchToProps = {
  actionTooglePan: canvasDuck.creators.actionTooglePan,
}

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(ToolBarView)
